<script setup lang="ts">
import {ref} from "vue";
import {teacherContent} from "@/http/home";
import {useRouter} from "vue-router";
import router from "@/router";

let baseUrl = 'http://192.168.5.120:8090'
// 教师列表请求
let teacherList = ref<any[]>([])
teacherContent({pageNum: 1, pageSize: 10}).then(res => {
    // console.log(res)
    // nextTick(()=>{
    if (res.code === 200) {
        teacherList.value = res.rows
        // console.log(swiperList)
    } else if (res.code == 401) {
        router.push('/denglu')
    }
    // })

});

</script>

<template>
  <!--        名师推荐-->
    <div class="teacher">
        <van-cell-group inset>
            <van-cell title="名师推荐" value="更多" is-link to="/allTeacher"
                      style="font-size: 18px;background-color: #F5F5F5"/>
        </van-cell-group>

        <!--        推荐列表-->
        <div class="teacherList">

            <router-link custom
                         v-for="item in teacherList"
                         :key="item.id"
                         :to="{path: '/teacherDetail',query: {id:item.id}}"
                         v-slot="{navigate}"
            >
                <div class="each" @click="navigate">
                    <div class="photo"><img :src="baseUrl+item.avatar" alt=""></div>
                    <p>{{ item.name }}</p>
                    <div class="question">
                        <div v-for="items in item.labels" :key="items.id">{{ items.label }}</div>
                    </div>
                </div>
            </router-link>


        </div>
    </div>
  <!--    心理测评-->
    <div class="test">

        <router-link to="/PsychologicalEvaluation" style="color: #323233">
            <div>心理测评</div>
        </router-link>
    </div>
</template>

<style scoped lang="less">
//名师推荐
.teacher {
  .van-cell-group {
    margin: 0;
  }

  .teacherList {
    width: 95%;
    height: 30vh;
    //background-color: aquamarine;
    margin: 0 auto;
    white-space: nowrap;
    overflow: auto;
    display: flex;
    justify-content: space-between;

    .each {
      border-radius: 10px;
      height: 29vh;
      padding: 1%;
      flex-shrink: 0;
      text-align: center;
      margin-right: 10px;
      width: 44%;
      background-color: white;

      .photo {
        width: 80px;
        margin: 20px auto;
        height: 80px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .question {
        width: 100%;
        height: 7vh;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;

        div {
          box-sizing: border-box;
          border-radius: 10px;
          padding: 2px;
          height: 3vh;
          line-height: 3vh;
          width: 48%;
          background-color: #ece2f8;
          color: #7246c5;
        }
      }

    }
  }

}

.test {
  width: 95%;
  margin: 10px auto 0;
  height: 5vh;
  background-color: #CEAFF8;
  text-align: center;
  line-height: 5vh;
  border-radius: 6px;
}

</style>